﻿<!DOCTYPE html>
<html>
  <head>
    <title>.AEON</title>
	<link rel="stylesheet" type="text/css" href="aeon.css">
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="js/jquery-ui-1.8.20.custom.min.js"></script>
	<script type="text/javascript">
	$(function() {
		$("#searchbar").hide();
		$(".search_stream").draggable(
			{ 
				containment: "window",
				scroll: false, 
				helper: "clone",
				revert: false
			});
		$("#userstreams").droppable(
			{
				accept: ".search_stream",
				drop: function(event, ui) 
					{  
						$("#userstreams").append('<div class="stream_list_title"><a href="#">' + ui.draggable.find(".search_stream_title").text() + '</a></div>');
					}
			});
		$("#fubar_content").hide();
		$("#fubar").hover(
			function() {
				$(this).addClass("fubar_background");
				$("#fubar_content").show();
			}, 
			function() {
				$(this).removeClass("fubar_background");
				$("#fubar_content").hide();
			}
		);	
	});
	</script>
  </head>
  <body id="body">
	<div id="topbar">
		<div id="logo" style="float: left; width: 270px;">
			<img src="images/AeonLogoOn.png" />
		</div>
		<div id="searchfield" style="float: left;">
			<input type="text" size="40" style="margin-left: 0px; margin-top: 15px;" placeholder="Suche..."/>
		</div>
		<div style="display: block; clear: both;">
	</div>
	<div id="content">
		<div id="leftbar">
			<div id="streamlist">
				<div class="streamcategory">
					<div class="stream_list_title stream_list_title_active">
						<a href="#">Start</a>
					</div>
					<div class="stream_list_title">
						<a href="#">Erwähnungen</a>
					</div>
				</div>
				<div class="streamcategory" id="userstreams">
					<div class="stream_list_title">
						<a href="#">BFS201FI</a>
					</div>
					<div class="stream_list_title">
						<a href="#">Inner Circle</a>
					</div>
					<div class="stream_list_title">
						<a href="#">Abschlussfahrt</a>
					</div>				
				</div>
				<div class="streamcategory">
					<div class="stream_new_stream stream_list_title">
						<a href="#">+ NEW STREAM</a>
					</div>
				</div>
			</div>
		</div>
		<div id="searchbar">
			<div class="searchcategory">
				<div class="searchcategory_head">
					<div class="searchcategory_title">
						.Benutzer
					</div>
					
					<div class="searchcategory_load_more">
						<a href="#">.mehr laden</a>
					</div>
					<div style="display: block; clear: both;"></div>
				</div>	
				<div style="display: block; clear: both;"></div>				
				<div class="searchcategory_content">
					<div class="search_user">
						<a href="#">
							<img class="user_search_profile_image" src="images/users/1.jpg" />
							<div class="user_search_name">Symike AusderGruft</div>
						</a>
						<div style="display: block; clear: both;"></div>
					</div>
					<div class="search_user">
						<a href="#">
							<img class="user_search_profile_image" src="images/users/2.jpg" />
							<div class="user_search_name">Michael Völkl</div>
						</a>
						<div style="display: block; clear: both;"></div>
					</div>
					<div class="search_user">
						<a href="#">
							<img class="user_search_profile_image" src="images/users/3.jpg" />
							<div class="user_search_name">Martin Huber</div>
						</a>
						<div style="display: block; clear: both;"></div>
					</div>
				</div>
			</div>
			<div class="searchcategory">
				<div class="searchcategory_head">
					<div class="searchcategory_title">
						.Streams
					</div>
					<div class="searchcategory_load_more">
						<a href="#">.mehr laden</a>
					</div>
					<div style="display: block; clear: both;"></div>
				</div>	
				<div style="display: block; clear: both;"></div>				
				<div class="searchcategory_content">
					<div class="search_text_item search_stream" data-value="5">
						<div class="search_stream_title">
							BFS2010FI
						</div>
						<div class="serach_stream_subtitle">
							von <a href="#">Michael Kollmann</a>
						</div>
					</div>
					<div class="search_text_item search_stream">
						<div class="search_stream_title">
							Abschlussfahrt
						</div>
						<div class="serach_stream_subtitle">
							von <a href="#">Darius Gafron</a>
						</div>
					</div>
					<div class="search_text_item search_stream">
						<div class="search_stream_title">
							Inner Circle
						</div>
						<div class="serach_stream_subtitle">
							von <a href="#">Jennifer Bonsuh</a>
						</div>
					</div>
				</div>
			</div>
			<div class="searchcategory">
				<div class="searchcategory_head">
					<div class="searchcategory_title">
						.Tags
					</div>
					
					<div class="searchcategory_load_more">
						<a href="#">.mehr laden</a>
					</div>
					<div style="display: block; clear: both;"></div>
				</div>	
				<div style="display: block; clear: both;"></div>				
				<div class="searchcategory_content">
					<div class="search_text_item search_hashtag">
						<div class="search_stream_title">
							#Schule
						</div>
						<div class="serach_stream_subtitle">
							204 Erwähnungen
						</div>
					</div>
					<div class="search_text_item search_hashtag">
						<div class="search_stream_title">
							#Pausenverkauf
						</div>
						<div class="serach_stream_subtitle">
							80 Erwähnungen
						</div>
					</div>
					<div class="search_text_item search_hashtag">
						<div class="search_stream_title">
							#YIT
						</div>
						<div class="serach_stream_subtitle">
							42 Erwähnungen
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div id="contentarea">
			<div id="stream_posts">
				<div class="post">
					test
				</div>
			</div>
		</div>
	</div>
	<div id="fubar">
		<div id="fubar_head">
			<img id="my_profilepicture" src="images/users/4.jpg" />
			<div id="fubar_head_content">
				<div id="fubar_head_text">
					<a href="#">.Michael Kollmann</a>
				</div>
				<div id="fubar_head_icon">
					▼
				</div>
				<div style="display: block; clear: both;"></div>
			</div>
			<div style="display: block; clear: both;"></div>
		</div>
		<div id="fubar_content">
			<a href="#" class="fubar_content_link">Profil bearbeiten</a>
			<a href="#" class="fubar_content_link">Abmelden</a>
		</div>
	</div>
  </body>
</html>